<template>
  <div class="quality">
    <el-form :inline="true" :model="precisequeryData" class="top">
      <el-form-item>
        <el-select
          v-model="precisequeryData.departmentId"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in departmentlist"
            :key="item.id"
            :label="item.departmentName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="生产时间:"
        class="center"
        v-if="selectBatch != 'second'"
      >
        <el-date-picker
          v-model="precisequeryData.date"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="right">
        <el-button type="primary" @click="search()">搜索</el-button>
        <el-button type="primary" @click="openDialog(true)">添加</el-button>
      </el-form-item>
    </el-form>
    <ul class="navigation">
      <li
        class="nav_item"
        :class="activeName == 1 ? 'isActive' : 'notActive'"
        @click="switchTab(1)"
      >
        <span>
          <img v-show="activeName == 1" src="./image/admin_active.png" alt="" />
          <img v-show="activeName != 1" src="./image/admin.png" alt="" />
        </span>
        <span>批号管理</span>
      </li>
      <li
        class="nav_item"
        :class="activeName == 2 ? 'isActive' : 'notActive'"
        @click="switchTab(2)"
      >
        <span>
          <img
            v-show="activeName == 2"
            src="./image/record_active.png"
            alt=""
          />
          <img v-show="activeName != 2" src="./image/record.png" alt="" />
        </span>
        <span>检测记录</span>
      </li>
    </ul>
    <!-- 批号管理 -->
    <v-batch
      v-show="activeName == 1"
      @BatchType="BatchType"
      ref="vBatch"
      :precisequeryData="precisequeryData"
    ></v-batch>
    <!-- 检测记录 -->
    <v-detection ref="detection" v-if="activeName == 2"></v-detection>
    <!-- 批号管理-试纸批号弹窗 -->
    <sz-dialog
      v-if="activeDialog_sz && departmentlist && departmentlist.length > 0"
      :activeDialog_sz="activeDialog_sz"
      :departmentlist="departmentlist"
    ></sz-dialog>
    <!-- 批号管理-质控批号弹窗 -->
    <zk-dialog
      v-if="activeDialog_zk && departmentlist && departmentlist.length > 0"
      :activeDialog_zk="activeDialog_zk"
      :departmentlist="departmentlist"
    ></zk-dialog>
    <!-- 检测记录弹窗 -->
    <examine-dialog
      v-if="examineDialog"
      :examineDialog="examineDialog"
    ></examine-dialog>
  </div>
</template>

<script>
import vBatch from "./batch";
import vDetection from "./detection";
import szDialog from "./dialog/ph_sz";
import zkDialog from "./dialog/ph_zk";
import examineDialog from "./dialog/examine";

export default {
  data() {
    return {
      activeName: "1", //tabs切换
      precisequeryData: {
        departmentId: "",
        date: "",
      },
      departmentlist: [],
      activeDialog_sz: false, //添加试纸批号状态
      activeDialog_zk: false, //添加质控批号状态
      examineDialog: false,
      selectBatch: "first",
    };
  },
  components: {
    vBatch,
    vDetection,
    szDialog,
    zkDialog,
    examineDialog,
  },
  mounted() {
    this.getDepartment();
  },
  methods: {
    handleClick() {},

    // 切换tab
    switchTab(id) {
      // id == 1 批号管理 id == 2 检测记录
      this.activeName = id;
      this.precisequeryData.departmentId = "";
      this.precisequeryData.date = "";
    },

    // 获取所有科室
    getDepartment() {
      let routeid = sessionStorage.getItem("routeID");
      let routeID = routeid ? JSON.parse(routeid)["/quality"] : "";
      let data = {
        perId: routeID,
      };
      this.$api.getDepartment(data).then((res) => {
        this.departmentlist = res.data.data;
      });
    },

    // 打开添加试纸批号弹窗
    openDialog(data) {
      if (this.activeName == 1 && this.selectBatch == "first") {
        this.activeDialog_sz = data;
      } else if (this.activeName == 1 && this.selectBatch == "second") {
        this.activeDialog_zk = data;
      } else if (this.activeName == 2) {
        this.examineDialog = data;
      }
    },

    // 添加试纸批号
    addBatch(val) {
      this.$api
        .addArticleTry(val)
        .then((res) => {
          this.$message.success(res.message);
          this.search();
          this.openDialog(false);
        })
        .catch((err) => {
          this.openDialog(false);
        });
    },

    // 添加质控批号
    addquality(val) {
      this.$api
        .addQualityControl(val)
        .then((res) => {
          this.$message.success(res.message);
          this.search();
          this.openDialog(false);
        })
        .catch((err) => {
          this.openDialog(false);
        });
    },

    // // 添加检测记录
    // addExamine(val) {

    //   this.openDialog(false);
    // },

    // 添加检测记录
    addQualityRecords(data) {
      this.$api.addQualityRecords(data).then(res =>{
        this.$message.success(res.message)
        this.openDialog(false);
        this.search()
      }).catch(err =>{
        this.openDialog(false);
      })
    },

    // 获取现在的批号类型(first:试纸批号,second:质控批号)
    BatchType(val) {
      this.selectBatch = val;
      this.precisequeryData.departmentId = "";
      this.precisequeryData.date = "";
    },

    // 模糊查询
    search(page) {
      // this.activeName == 1 批号管理 id == 2 检测记录
      let data = {
        departmentId: this.precisequeryData.departmentId,
        current: page ? page : "",
      };
      // (first--试纸) (second--质控)
      if (this.activeName == 1 && this.selectBatch == "first") {
        data.startTime = this.precisequeryData.date[0];
        data.endTime = this.precisequeryData.date[1];
        this.$refs.vBatch.getArticleTryInfo(data);
      } else if(this.activeName == 1 && this.selectBatch == "second"){
        // (second--质控)
        this.$refs.vBatch.getQualityControl(data);
      }
      // 获取检测记录
      if(this.activeName == 2) {
        data.startTime = this.precisequeryData.date[0];
        data.endTime = this.precisequeryData.date[1];
        this.$refs.detection.getCheckRecord(data)
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.quality {
  padding: 19px 31px 0;
  background-color: #fff;
  height: 100%;
  .top {
    padding: 20px 0;
    position: relative;

    .el-form-item {
      height: 40px;
      margin-bottom: 0;
    }
    .el-form-item.right {
      position: absolute;
      right: 0;
    }
    @media screen and (max-width: 1034px) {
      .el-form-item.right {
        position: relative;
      }
    }
    @media screen and (max-width: 710px) {
      .el-form-item.center {
        .el-date-editor.el-range-editor.el-input__inner {
          width: 156px;
        }
      }
    }
  }
  .navigation {
    padding: 0;
    margin: 0;
    display: flex;
    .nav_item {
      list-style: none;
      margin-right: 20px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      padding: 10px;
      &:hover {
        color: #01a7f0;
      }
      img {
        width: 23px;
      }
    }
    .isActive {
      position: relative;
      color: #01a7f0;
      &::after {
        position: absolute;
        content: "";
        width: 100%;
        left: 0;
        bottom: 0;
        border: 1px solid #01a7f0;
      }
    }
  }
}
</style>